import React, { useState } from 'react';
import { Title } from 'base/ctl/title';
import { useStep } from 'use/step';
import { get_path, } from 'base/ctl/base';
import { Time } from 'base/ctl/base';
import { g_db } from 'db/state';
import { PairView } from './pair';
import { Sbtn } from '../stock/ctl';

const ClientView = ({ umd, wsn }) => {
    const [fin, setFin] = useState();

    if (fin === "any") {
        return <PairView hreturn={() => setFin(null)} mod={fin} title="万向补刻"/>;
    }

    if (fin === "pair") {
        return <PairView hreturn={() => setFin(null)} mod={fin} title="组配补刻"/>;
    }

    return (
        <div className="flex flex-col ml-2 mr-1">
            <div className="inline-flex mt-2 justify-between items-center">
                <Title value="补刻" width="w-56"/>
                <Time className="text-2xl"/>
            </div>
            <div className="bg-white flex flex-col mr-2 mt-12">
                <div className="bg-green-700 text-2xl text-white py-2 pl-4">补刻类型</div>
                <div className="inline-flex my-4">
                    <Sbtn cl="green" label="万向" hcmd={() => setFin("any")}/>
                    <Sbtn cl="blue" label="组配" hcmd={() => setFin("pair")}/>
                </div>
            </div>
        </div>
    );
};

const QrClient = ({ pathname, mod }) => {
    const [line, wsn] = get_path(pathname, mod);
    const umd = useStep(line, wsn);

    if (g_db.is_stop_scan()) {
        g_db.start_scan();
    }

    return <ClientView umd={umd} wsn={wsn}/>;
};

export {QrClient};
